<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            background-color="#104E8B"
            text-color="#fff"
            active-text-color="#fff"
            unique-opened
            router
            :default-openeds="openlist"
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index" >
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <!-- <template v-if="item.subs =null"></template> -->
                        <!-- 子菜单 -->
                        <template v-for="subItem in item.subs">
                            <el-submenu
                                v-if="subItem.subs"
                                :index="subItem.index"
                                :key="subItem.index"
                            >
                                <template slot="title">{{ subItem.title }}</template>
                                <template v-for="threeItem in subItem.subs">
                                    <!-- 子菜单 -->
                                    <el-submenu
                                       v-if="threeItem.subs"
                                       :index="threeItem.index"
                                       :key="threeItem.index"
                                    >
                                        <template slot="title">{{ threeItem.title }}</template>
                                        <template v-for="fourItem in threeItem.subs">
                                            <el-submenu
                                                v-if="fourItem.subs"
                                                :index="fourItem.index"
                                                :key="fourItem.index">
                                                <template slot="title">{{ fourItem.title }}</template>
                                            </el-submenu>
                                            <el-menu-item 
                                                v-else
                                                :index="fourItem.index"
                                                :key="fourItem.index">{{ fourItem.title }}</el-menu-item>
                                        </template>
                                    </el-submenu>
                                    <el-menu-item 
                                        v-else
                                        :index="threeItem.index"
                                        :key="threeItem.index">{{ threeItem.title }}</el-menu-item>
                                </template>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="subItem.index"
                                :key="subItem.index"
                            >{{ subItem.title }}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    data() {
        return {
            collapse: false,
            openlist: ['2'],
            items:[]
            // items: [
            //     {
            //         icon: 'el-icon-lx-home',
            //         index: 'classifiedinformation',
            //         title: '分类信息',
            //         subs: [{
            //             icon: 'el-icon-lx-home',
            //             index: 'dashboard',
            //             title: '居民分类信息'
            //         },{
            //             icon: 'el-icon-lx-home',
            //             index: 'company',
            //             title: '单位分类信息'
            //         }]
            //     },
            //     {
            //         icon: 'el-icon-chat-line-square',
            //         index: 'realtimes',
            //         title: '实时动态',
            //         subs: [
            //             {
            //                 icon: 'el-icon-lx-copy',
            //                 index: 'realtimestatus',
            //                 title: '实时投放'
            //             }
            //         ]
            //     },{
            //         icon: 'el-icon-s-data',
            //         index:'guide',
            //         title: '指导员'
            //     },{
            //         icon: 'el-icon-s-data',
            //         index: 'datastatistics',
            //         title: '大数据统计',
            //     },
            //     {
            //         icon: 'el-icon-coin',
            //         index: 'integralmanagement',
            //         title: '积分统计',
            //         subs: [
            //             {
            //                 icon: 'el-icon-coin',
            //                 index: 'cumulativeintegralmanagement',
            //                 title: '累计投放积分规则设置'
            //             },
            //             {
            //                 icon: 'el-icon-coin',
            //                 index: 'consumptionrules',
            //                 title: '消费积分规则设置'
            //             },
            //             {
            //                 icon: 'el-icon-coin',
            //                 index: 'consumptionintegral',
            //                 title: '积分展示',
            //                 subs: [
            //                     {
            //                         icon: 'el-icon-coin',
            //                         index: 'streetintegral',
            //                         title: '街道积分',
            //                         // subs: [{
            //                         //         icon:'el-icon-coin',
            //                         //         index:'streetintegral',
            //                         //         title: '街道累计积分'
            //                         //     },
            //                         //     {
            //                         //         icon: 'el-icon-coin',
            //                         //         index: 'streetscore',
            //                         //         title: '街道消费积分'
            //                         //     },{
            //                         //         icon:'el-icon-coin',
            //                         //         index:'streetremaining',
            //                         //         title: '街道剩余积分'
            //                         //     }
            //                         // ]
            //                     },{
            //                         icon: 'el-icon-coin',
            //                         index: 'communityintegral',
            //                         title: '社区积分',
            //                         // subs: [{
            //                         //         icon:'el-icon-coin',
            //                         //         index:'communityintegral',
            //                         //         title: '社区累计积分'
            //                         //     },
            //                         //     {
            //                         //         icon: 'el-icon-coin',
            //                         //         index: 'communityscore',
            //                         //         title: '社区消费积分'
            //                         //     },{
            //                         //         icon:'el-icon-coin',
            //                         //         index:'communityremaining',
            //                         //         title: '社区剩余积分'
            //                         //     }
            //                         // ]
            //                         //  subs: [{
            //                         //     icon: 'el-icon-coin',
            //                         //     index: 'streetscore',
            //                         //     title:'社区消费积分' 
            //                         // },{
                                        
            //                         // }]
            //                     },{
            //                         icon: 'el-icon-coin',
            //                         index: 'plotintegral',
            //                         title: '小区积分',
            //                         // subs: [{
            //                         //         icon:'el-icon-coin',
            //                         //         index:'plotintegral',
            //                         //         title: '小区累计积分'
            //                         //     },
            //                         //     {
            //                         //         icon: 'el-icon-coin',
            //                         //         index: 'plotscore',
            //                         //         title: '小区消费积分'
            //                         //     },{
            //                         //         icon:'el-icon-coin',
            //                         //         index:'plotremaining',
            //                         //         title: '小区剩余积分'
            //                         //     }
            //                         // ]
            //                     },{
            //                         icon: 'el-icon-coin',
            //                         index: 'residentsintegral',
            //                         title: '居民积分',
            //                         // subs: [{
            //                         //         icon:'el-icon-coin',
            //                         //         index:'residentsintegral',
            //                         //         title: '居民累计积分'
            //                         //     },
            //                         //     {
            //                         //         icon: 'el-icon-coin',
            //                         //         index: 'residentsscore',
            //                         //         title: '居民消费积分'
            //                         //     },{
            //                         //         icon:'el-icon-coin',
            //                         //         index:'residentsremaining',
            //                         //         title: '居民剩余积分'
            //                         //     }
            //                         // ]
            //                     }
            //                 ]
            //             }
            //         ]
            //     },{
            //         icon: 'el-icon-s-marketing',
            //         index: 'intemanagement',
            //         title: '垃圾量统计',
            //         subs: [
            //             {
            //                 icon: 'el-icon-s-marketing',
            //                 title: '垃圾收集量',
            //                 subs: [{
            //                     icon: 'el-icon-s-marketing',
            //                     index:'streetweigh',
            //                     title: '街道统计',
            //                 },{
            //                     path: 'el-icon-s-marketing',
            //                     index: 'communityweigh',
            //                     title: '社区统计'
            //                 },{
            //                     path: 'el-icon-s-marketing',
            //                     index: 'plotweigh',
            //                     title: '小区统计'
            //                 },{
            //                     path: 'el-icon-s-marketing',
            //                     index: 'residentsweigh',
            //                     title: '居民统计'
            //                 },{
            //                     path: 'el-icon-s-marketing',
            //                     index: 'Institutionsweigh',
            //                     title: '机关单位'
            //                 }]
            //             }
            //         ]
            //     },
            //     // {
            //     //     icon: 'el-icon-lx-cascades',
            //     //     index: 'table',
            //     //     title: '人员列表'
            //     // },
            //     {
            //         icon: 'el-icon-lx-calendar',
            //         index: '3',
            //         title: '基本信息',
            //         subs: [
            //             {
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'streetmessage',
            //                 title: '街道信息管理'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'communitymessage',
            //                 title: '社区信息管理'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'xiaoqumessage',
            //                 title: '小区信息管理'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'residentsmessage',
            //                 title: '居民信息管理'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'businessunit',
            //                 title: '机关事业单位/餐饮单位'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'instructor',
            //                 title: '指导员信息管理'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'inspector',
            //                 title: '巡查员信息管理'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'lajidian',
            //                 title: '垃圾点管理'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
                            
            //                 title: '巡查记录统计'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'handlecard',
            //                 title: '办卡管理'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
            //                 index: 'upload',
            //                 title: '图片上传'
            //             },{
            //                 icon: 'el-icon-lx-calendar',
                            
            //                 title: '列表'
            //             }
            //         ]
            //         //     {
            //         //         index: '3-2',
            //         //         title: '三级菜单',
            //         //         subs: [
            //         //             {
            //         //                 index: 'editor',
            //         //                 title: '富文本编辑器'
            //         //             },
            //         //             {
            //         //                 index: 'markdown',
            //         //                 title: 'markdown编辑器'
            //         //             }
            //         //         ]
            //         //     },
            //         //     {
            //         //         index: 'upload',
            //         //         title: '文件上传'
            //         //     }
            //         // ]
            //     },
            //     // {
            //     //     icon: 'el-icon-lx-emoji',
            //     //     index: 'icon',
            //     //     title: '自定义图标'
            //     // },
            //     // {
            //     //     icon: 'el-icon-pie-chart',
            //     //     index: 'charts',
            //     //     title: 'schart图表'
            //     // },
            //     // {
            //     //     icon: 'el-icon-rank',
            //     //     index: '6',
            //     //     title: '拖拽组件',
            //     //     subs: [
            //     //         {
            //     //             index: 'drag',
            //     //             title: '拖拽列表'
            //     //         },
            //     //         {
            //     //             index: 'dialog',
            //     //             title: '拖拽弹框'
            //     //         }
            //     //     ]
            //     // },
            //     // {
            //     //     icon: 'el-icon-lx-global',
            //     //     index: 'i18n',
            //     //     title: '国际化功能'
            //     // },
            //     // {
            //     //     icon: 'el-icon-lx-warn',
            //     //     index: '7',
            //     //     title: '错误处理',
            //     //     subs: [
            //     //         {
            //     //             index: 'permission',
            //     //             title: '权限测试'
            //     //         },
            //     //         {
            //     //             index: '404',
            //     //             title: '404页面'
            //     //         }
            //     //     ]
            //     // },
            //     // {
            //     //     icon: 'el-icon-lx-redpacket_fill',
            //     //     index: '/donate',
            //     //     title: '支持作者'
            //     // }
            // ]
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });
        this.getpermissions()
    },
    methods: {
         handleOpen(key){
          this.default_openeds_array.push(key);
        },
         handleSelect(key, keyPath){
          console.log(key, keyPath);
          if (key == '1-1-1'){
            this.currentView = 'componnts'
          } 
        },
        // 权限获取列表
        getpermissions(){
            this.$axios({
                url: this.$rurl + '/GetFunctionList',
                method: 'get',
                params:{
                    id: localStorage.getItem('ROLEID')
                }
            }).then(res=>{
                this.items = Object.assign([],res.data)
               return res.data.filter(item=>{
                    if(item.subs.length == 0){
                        item.subs = undefined
                    }else {
                        item.subs.filter(items=>{
                            if( items.subs.length == 0){
                                items.subs = undefined
                            }
                        })
                    }
                })
            })
        },
    }
};

</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
    
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 200px;
}
.sidebar > ul {
    height: 100%;
}
</style>
